<template>
  <div>
    <!-- 步骤条 -->
    <el-steps
      :active="active"
      simple
      process-status="success"
      finish-status="wait"
    >
      <!-- 填写基本信息 -->
      <el-step title="步骤 1" icon="el-icon-edit"></el-step>

      <!-- 填写打折活动信息 -->
      <el-step title="步骤 2" icon="el-icon-upload"></el-step>

      <!-- 上传图片 -->
      <el-step title="步骤 3" icon="el-icon-picture"></el-step>
    </el-steps>

    <!-- 填写基本信息 -->
    <el-form
      :model="basicInfo"
      status-icon
      ref="basicInfo"
      :rules="rules"
      label-width="150px"
      :hide-required-asterisk="true"
      class="info"
      v-show="active === 0"
    >
      <el-form-item label="商品标题" prop="title" required>
        <el-input
          type="text"
          v-model="basicInfo.title"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="desc">
        <el-input
          type="textarea"
          v-model="basicInfo.desc"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品种类一级目录" prop="category" required>
        <el-select
          v-model="basicInfo.category"
          placeholder="请选择商品一级种类"
        >
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品种类二级目录" prop="c_items">
        <el-select v-model="basicInfo.c_items" multiple placeholder="请选择">
          <el-option
            v-for="item in childrenCate"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品标签" prop="tags" required>
        <el-select
          v-model="basicInfo.tags"
          multiple
          filterable
          allow-create
          default-first-option
          placeholder="请选择文章标签"
        >
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 价格区域 -->
    <el-form
      :model="basicInfo"
      status-icon
      ref="basicInfo"
      :rules="rules"
      label-width="150px"
      hide-required-asterisk
      class="info"
      v-show="active === 1"
    >
      <el-form-item label="商品价格" prop="price" required>
        <el-input
          type="text"
          v-model.number="basicInfo.price"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="折扣价格" prop="price_off" required>
        <el-input
          type="text"
          v-model.number="basicInfo.price_off"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="计量单位" prop="unit" required>
        <el-input
          type="text"
          v-model="basicInfo.unit"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品库存" prop="inventory" required>
        <el-input
          type="text"
          v-model.number="basicInfo.inventory"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>

    <!-- 上传图片区域 -->
    <el-form
      :model="basicInfo"
      status-icon
      ref="basicInfo"
      :rules="rules"
      label-width="150px"
      hide-required-asterisk
      class="info"
      v-show="active === 2"
    >
      <el-form-item label="上架状态" prop="status">
        <el-radio v-model="basicInfo.status" :label="1">上架</el-radio>
        <el-radio v-model="basicInfo.status" :label="0">下架</el-radio>
      </el-form-item>

      <el-form-item label="上传图片" prop="images">
        <el-upload
          action="https://mallapi.duyiedu.com/upload/images?appkey=bobo_1621138855071"
          name="avatar"
          list-type="picture-card"
          :on-success="handleSuccess"
          :file-list="basicInfo.images"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>

    <!-- 控制按钮区域 -->
    <el-row type="flex" justify="center" class="control">
      <el-col :span="3">
        <el-button
          :disabled="active < 1"
          type="primary"
          @click="handleClick(-1)"
          >上一步</el-button
        >
      </el-col>

      <el-col :span="3">
        <el-button :disabled="active < 2" type="primary" @click="handleClick"
          >提交</el-button
        >
      </el-col>
      <el-col :span="3">
        <span>
          <el-button
            :disabled="active >= 2"
            type="primary"
            @click="handleClick(1)"
            >下一步</el-button
          >
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCateList } from "@/api/products.js";
export default {
  props:{
    "formData" : {

      default :()=> ({
        /* 基础信息 */
        title: "", // 商品标题
        desc: "", // 商品描述
        category: "", // 商品种类
        c_items: [], // 商品子类目
        tags: [], // 商品标签

        /* 价格信息 */
        price: 0, // 商品价格
        price_off: 0, // 折扣价
        unit: "", // 商品计量单位
        status: 1, // 商品上架状态
        inventory: 0, // 商品库存

        /* 图片信息 */
        images: [], // 图片库

      })
    }
  },
  
  async created() {
    if(this.formData){
      this.basicInfo = this.formData;
    }

    let categoryList = await getCateList();
    this.categoryList = categoryList.data;
  },
  data() {
    return {
      active: 0,
      basicInfo: {
        /* 基础信息 */
        title: "", // 商品标题
        desc: "", // 商品描述
        category: "", // 商品种类
        c_items: [], // 商品子类目
        tags: [], // 商品标签

        /* 价格信息 */
        price: 0, // 商品价格
        price_off: 0, // 折扣价
        unit: "", // 商品计量单位
        status: 1, // 商品上架状态
        inventory: 0, // 商品库存

        /* 图片信息 */
        images: [], // 图片库

      },
      rules: {
        title: [{ required: true, message: "请输入商品标题" }],
        category: [{ required: true, message: "请输入商品种类" }],
        tags: [{ required: true, message: "请选择商品标签" }],
        price: [{ required: true, message: "请输入商品价格" }],
        price_off: [{ required: true, message: "请输入折扣价" }],
        unit: [{ required: true, message: "请输入商品计量单位" }],
        status: [{ required: true, message: "请选择商品上架状态" }],
        inventory: [{ required: true, message: "请输入商品库存" }],
        images: [{ required: true, message: "请选项商品图片" }],
      },
      categoryList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    handleClick(sub) {
      // 如果传入的是数字代表的是进入下一步
      if (typeof sub === "number") {
        let active = this.active + sub;
        if (active >= 0 && active <= 2) {
          this.active = active;
        }
      } 
      // 如果传入的不是数字，则表示提交数据
      else {
        this.$emit('submit',this.basicInfo)
      }
    },
    handleSuccess(resp){
      this.basicInfo.images.push(resp.data)
    },
    handleRemove(file,filelist){
      this.basicInfo.images = filelist;
    }
  },
  computed: {
    childrenCate() {
      if (!this.categoryList || !this.basicInfo.category) {
        return [{ value: " ", label: " " }];
      }
      return this.categoryList
        .find((it) => it.id === this.basicInfo.category)
        .c_items.map((it) => ({
          value: it,
          label: it,
        }));
    },
  },
  watch:{
    'formData'(){
      if(typeof this.formData === 'object'){
        this.basicInfo = this.formData;
      }
    }
  }
};
</script>

<style scopde lang="less">
.info {
  width: 800px;
  margin: 40px auto;
}
.control {
  width: 800px;
  margin: 40px auto;
  text-align: center;
}
</style>